CodeBlock - aria argument and screen-reader improvements
#2879
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@MelSumner @shleewhite I've been working on the a11y improvements originally raised in HDS-3349. For the accessible name and description I've aligned the Code Block to the Code Editor and attached the title + description to the code element if they are present + added some aria arguments. My main open question is related to making line highlighting visible to the SR. One approach would be to add some sr text saying which lines are highlighted. However, the code block line numbers come from Prism, and are not accessible to the sr. The code is read as one long block of text. 
The approach I've taken currently is to add 
This involves directly editing the code that prism js gives us, but I wanted to see if this would be a good approach to take, or if there are any other ideas we have for announcing line highlights to the screen reader. |
shleewhite
left a comment
shleewhite
left a comment
There was a problem hiding this comment.
the approach looks good! looking at the showcase though, seems like the "highlight start/end" strings are visible right now.
dchyun
force-pushed
the
dchyun/code-block-a11y-improvements
branch
from
9fc3123 to
6a53a0d
Compare
|
this seems like a great approach! |
| textToCopy = targetElement.value; | ||
| } else { | ||
| // Hide any screen reader only text from the innerText calculation | ||
| const srOnlyTexts = targetElement.querySelectorAll('.sr-only'); |
There was a problem hiding this comment.
Is there a case for this outside of the CodeBlock component?
There was a problem hiding this comment.
There isn't right now, but it could be useful in general. I don't think there's a use case for having sr only text and wanting it copied, which is what would happen currently.
5 participants
📌 Summary
PREVIEW
If merged, this PR would improve the accessibility of the
CodeBlockby implementing the following features@ariaLabel,@ariaLabelledBy, and@ariaDescribedByaria-labelledbyandaria-describedbyIt would also update the
hds-clipboardmodifier to support not copyingsr-onlytext.🛠️ Detailed description
Accessible names
The
@ariaLabel,@ariaLabelledBy, and@ariaDescribedByarguments have been added to theCodeBlockto align its approach to theCodeEditor.Also, the setting of these aria attributes has been aligned to the
CodeEditorin the following ways.aria-labelledbywill be set to the ID of the title elementaria-describedby, will be set to the ID of the description element@ariaLabelargument, and a title is present, the title id will not be set inaria-labelledbyThe docs (#2896) will be updated to match the
CodeEditorand say that@ariaLabelor@ariaLabelledbymust be used if a title is not present. Existing implementation of theCodeBlockshould be updated to add these arguments, but this will not cause breaking changes for anyone.Line highlighting for screen readers
Currently, there is no indication to screen reader users when line highlighting is used. Due to the fact that line numbers are also inaccessible to the screen reader (which can not be fixed since line numbers come from Prism), we can not add sr only text such as "Line 2 and 4 highlighed"
Instead the approach taken is to edit the code generated by prism to add
sr-onlytext before and after line highlight starts indicating when highlighting starts, and when it ends. To prevent thesr-onlytext from being copied to the clipboard with theCopyButton, thehds-clipboardmodifier has been updated to ignoresr-onlytextThe logic for determining where to add the sr only text mirrors the Prism plugin's code for determining highlights.
📸 Screenshots
Aria attributes for title and description
Before
After
Line highlighting screen-reader only copy
🔗 External links
Jira ticket: HDS-3349
👀 Component checklist
💬 Please consider using conventional comments when reviewing this PR.